<template>
    <div class="child-component">
        <childComponent />
    </div>
</template>

<script setup lang="jsx">
import { reactive,provide,inject } from 'vue'

const parentData = reactive({
    id: '01',
    name: 'parent',
    des: '这是一条父组件里的数据'
})

provide('parentData', parentData)

const childComponent = () => {
    const parentData = inject('parentData')
    return (
        <>
            <h3>父组件传来的数据</h3>
            <p>id: {parentData.id}</p>
            <p>name: {parentData.name}</p>
            <p>des: {parentData.des}</p>
        </>
    )
}
</script>